<template>
  <div class="pro-header">
    <div class="avatar">
      <img src="~assets/images/profile/avatar.png" alt="">
    </div>
    <div class="login_info">
      <div class="login">登陆/注册</div>
      <div class="phone">
        <img src="~assets/images/profile/phone.png" alt="">
        暂无绑定手机号
      </div>
    </div>
    <div class="arrow">
      <img src="~assets/images/common/arrow-right.png" alt="">
    </div>
  </div>
</template>

<script>
  export default {
    name:"proHeader",
    data(){
      return {}
    }
  }
</script>

<style scoped>
  .pro-header{
    height:85px;
    background-color:#ff5777;
    color:#fff;
    padding:6px 15px;
    position:relative;
    display:flex;
  }
  .avatar img{
    width:70px;
    height:70px;
    border-radius:35px;
    background-color:#fff;
    vertical-align:middle;
  }
  .login_info{
    vertical-align:middle;
    margin-left:15px;
  }
  .login_info .login{
    margin-top:9px;
  }
  .login_info .phone{
    font-size:14px;
    margin-top: 10px;
  }
  .login_info img{
    width:18px;
    height:18px;
    vertical-align:bottom;
  }
  .arrow{
    position:absolute;
    right:6px;
    top:30px;
  }
  .arrow img{
    width:30px;
    height:30px;
  }  
</style>
